<template>
  <KiFormDialog
    :show.sync="row.show"
    title="详情"
    v-model="row.data"
    readonly
    :before-close="()=>{ $emit('clearHotelId') }"
  >
    <template>
      <el-steps :active="activeOfStep" finish-status="wait" class="mb30">
        <el-step
        v-for="( item, index) in listOfStep"
        :title="item"
        :key="index"
        @click.native="activeOfStep = index"></el-step>
      </el-steps>
    </template>
    <template v-if="activeOfStep == 0"> <!--基本信息-->
      <preview-table>
        <tr>
          <td>酒店ID</td>
          <td>{{ row.data.hotelId }}</td>
          <td>酒店名称</td>
          <td>{{ row.data.pointName }}</td>
        </tr>
        <tr>
          <td>酒店地址</td>
          <td>{{ row.data.address }}</td>
          <td>酒店星级</td>
          <td>{{ row.data.hotelStarName }}</td>
        </tr>
        <tr>
          <td>酒店品牌ID</td>
          <td>{{ row.data.brandId }}</td>
          <td>酒店品牌名称</td>
          <td>{{ row.data.brandName }}</td>
        </tr>
        <tr>
          <td>楼层高度</td>
          <td>{{ row.data.floorNum }}</td>
          <td>房间总数</td>
          <td>{{ row.data.roomNum }}</td>
        </tr>
        <tr>
          <td>酒店营业状态</td>
          <td>{{ row.data.closeStatusName }}</td>
          <td>用户评分</td>
          <td>{{ row.data.avgScore }}</td>
        </tr>
        <tr>
          <td>开业时间</td>
          <td>{{ row.data.openDate }}</td>
          <td>装修时间</td>
          <td>{{ row.data.decorationDate }}</td>
        </tr>
        <tr>
          <td>酒店类型</td>
          <td>{{ row.data.poiTypeName }}</td>
          <td>酒店主题标签</td>
          <td>{{ row.data.themeTagName }}</td>
        </tr>
        <tr>
          <td>酒店电话</td>
          <td>{{ row.data.phone }}</td>
          <td>外宾政策</td>
          <td>{{ row.data.foreignPolicyName }}</td>
        </tr>
      </preview-table>
    </template>
    <template v-if="activeOfStep == 1"> <!--位置信息-->
      <h3 class="subtitle"><span>酒店地理信息</span></h3>
      <preview-table>
        <tr>
          <td>城市</td>
          <td>{{ row.data.cityName }}</td>
          <td>城市ID</td>
          <td>{{ row.data.cityId }}</td>
        </tr>
        <tr>
          <td>行政区</td>
          <td>{{ row.data.locationName }}</td>
          <td>行政区ID</td>
          <td>{{ row.data.locationId }}</td>
        </tr>
        <tr>
          <td>商圈</td>
          <td>{{ row.data.bareaName }}</td>
          <td>酒店经度</td>
          <td>{{ row.data.longitude }}</td>
        </tr>
        <tr>
          <td>酒店纬度</td>
          <td>{{ row.data.latitude }}</td>
        </tr>
      </preview-table>
      <h3 class="subtitle"><span>酒店周边交通</span></h3>
      <el-table
        stripe
        v-loading="row.loading"
        :data="row.data.transportation"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="经度" prop="longitude"/>
        <el-table-column label="纬度" prop="latitude"/>
        <el-table-column label="名称" prop="title"/>
        <el-table-column label="类型" prop="srcTypeName"/>
        <el-table-column label="距离酒店直线距离">
          <template slot-scope="{row}">
            {{ `${Number(row.distance).toFixed(2)} 米`}}
          </template>
        </el-table-column>
      </el-table>
      <h3 class="subtitle"><span>酒店周边景点</span></h3>
      <el-table
        stripe
        v-loading="row.loading"
        :data="row.data.scenic"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="地标名称" prop="title"/>
        <el-table-column label="酒店与地标直线距离">
          <template slot-scope="{row}">
            {{ `${Number(row.distance).toFixed(2)} 米`}}
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="activeOfStep == 2"> <!--图文详情-->
      <h3 class="subtitle"><span>酒店描述</span></h3>
      <div class="mb20" v-html="row.data.info" style="line-height:1.8;"/>
      <div class="table-operation">
        <h3 class="subtitle"><span>酒店图片</span></h3>
        <!-- <Pagination
          :total="graphicDetails.total"
          :currentPage.sync="graphicDetails.pageNo"
          @current-change="queryForPageImage(row.data.hotelId)"
        /> -->
        <el-pagination
          :total="graphicDetails.total"
          :currentPage.sync="graphicDetails.pageNo"
          :pageSize.sync="graphicDetails.pageSize"
          @current-change="queryForPageImage(row.data.hotelId)"
        />
      </div>
      <el-table
        stripe
        v-loading="graphicDetails.loading"
        :data="graphicDetails.data"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="图片类型" prop="typeName"/>
        <el-table-column label="图片标题">
          <template v-if="row.caption" slot-scope="{row}">
            {{ row.caption }}
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{row}">
            <PicViewer :value="row.url" tableCell />
          </template>
        </el-table-column>

      </el-table>
    </template>
    <template v-if="activeOfStep == 3"> <!--设施设备-->
      <h3 class="subtitle"><span>酒店设施</span></h3>
        <div class="exhibition">
          <span
          :style="{'display': item.facilitiesKeyName ? '' : 'none'}"
          v-for="item, index in  row.data.facilities"
          :key="index">{{ item.facilitiesKeyName }}</span>
        </div>
      <h3 class="subtitle"><span>酒店服务</span></h3>
        <div class="exhibition">
          <span
          :style="{'display': item.serviceKeyName ? '' : 'none'}"
          v-for="item, index in  row.data.services"
          :key="index">{{ item.serviceKeyName }}</span>
        </div>
    </template>
    <template v-if="activeOfStep == 4"> <!--政策规划-->
      <h3 class="subtitle"><span>入离时间</span></h3>
      <div>
        <span class="mr30">登记入住开始时间：{{ row.data.checkinTimeBegin }}</span>
        <span class="mr30">登记入住截止时间：{{ row.data.checkinTimeEnd | fieldByFilters }}</span>
        <span>离店时间：{{ row.data.checkoutTime }}</span>
      </div>
    </template>
  </KiFormDialog>
</template>

<script>
import { mapGetters } from "vuex";
import previewTable from "@/components/preview-table";

export default {
  components: { previewTable },
  computed: {
    ...mapGetters(["areaTree"]),
  },
  filters: {
    fieldByFilters(k) {
      const o = {
        0: '没有截止时间',
        'default': k,
      }
      return o[k] || o['default']
    },
  },
  watch: {
    '$attrs.id': {
      handler: function(newID) {
        if (newID) {
          this.activeOfStep = 0
          this.graphicDetails = {
            data: [],
            total: 0,
            pageNo: 1,
            pageSize: 10
          }
          this.queryForDetail(newID)
          this.queryForPageImage(newID)
          this.row.loading = true
          this.row.show = true
        }
      },
      immediate: true
    },
  },
  data () {
    return {
      activeOfStep: 0,
      listOfStep: ['基本信息', '位置信息', '图文详情', '设施设备', '政策规划'],
      graphicDetails: {
        data: [],
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      row: {
        show: false,
        loading: false,
        data: {}
      }
    }
  },
  methods: {
    queryForDetail(hotelId) {
      this.$POST('sot-admin-api/hotel/meituanHotel/queryForDetail', {
        id: hotelId,
      }).then(res => {
        res.data?.sideDatas.map(_ => {
          res.data[_.code] = _.itemList
        })
        this.row.data = res.data || []
        this.row.loading = false
      })
    },
    queryForPageImage(hotelId) {
      const { pageNo, pageSize } = this.graphicDetails
      this.$POST('sot-admin-api/hotel/meituanHotel/queryForPageImage', {
        hotelId,
        pageSize: pageSize,
        pageNo: pageNo
      }).then(res => {
        const { records, total } = res.data
        this.graphicDetails.data = records || []
        this.graphicDetails.total = total || 0
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.exhibition{
  display: flex;
  word-wrap: break-word;
  flex-wrap: wrap;
  >span{
    width: 20%;
    height: 48px;
    text-align: center;
    line-height: 48px;
    border-bottom: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
  }
  >span:nth-child(5n+1){
    border-left: 1px solid #EBEEF5;
  }
  >span:nth-child(-n+5){
    border-top: 1px solid #EBEEF5;
  }
}
</style>

